<template>
  <el-container class="height100">
    <el-header class="topHeader">
      <el-row>
        <div class="titleMain">
          <el-image
            style="width: 30px; height: 30px;float:left;margin-top:4px"
            :src="mLogoPic"
            fit="fit"
          ></el-image>
          <span style="float:left;margin-left:10px">公务车辆管理系统</span>
        </div>
        <div style="float:right;padding-top:16px">
          <span class="topLink pointx" icon="el-icon-edit" @click="mCurrentIndex='MainFragment'">
            <i class="el-icon-s-home">&nbsp;首页</i>
          </span>
          <span class="topLink pointx" icon="el-icon-edit" @click="mCurrentIndex='settingPage'">
            <i class="el-icon-s-tools">&nbsp;设置</i>
          </span>
          <span class="topLink pointx" icon="el-icon-edit" @click="mCurrentIndex='noticePage'">
            <el-badge v-if="mNoticeCount>0" :value="mNoticeCount" class="item">
              <i class="el-icon-message-solid">&nbsp;提醒</i>
            </el-badge>
          </span>
          <span
            class="topLink pointx"
            icon="el-icon-edit"
            style="color:#F56C6C"
            @click="$refs.refPersonInfoDialog.showMainDialog()"
          >
            <i class="el-icon-switch-button">&nbsp;退出</i>
          </span>
        </div>
        <!-- <el-button
          class="Avatar"
          type="primary"
          icon="el-icon-user-solid"
          circle
          @click="$refs.refPersonInfoDialog.showMainDialog()"
        ></el-button>-->
      </el-row>
    </el-header>
    <el-container style="background:#e1e1e1">
      <el-aside width="220px" height="100%;padding:0px" class="Fontb">
        <el-menu
          :default-active="mCurrentIndex"
          :default-openeds="['1','2','3','4']"
          @select="menuSelect"
          :collapse="false"
          @open="handleOpen"
          background-color="#131826"
          active-text-color="#E1B64D"
          text-color="#909399"
          @close="handleClose"
          class="el-menu-vertical-demo leftMenu"
        >
          <el-submenu index="1">
            <template slot="title">
              <el-row class="item-title">
                <i class="el-icon-s-unfold" style="color:#ffffff"></i>
                <span>行程</span>
              </el-row>
            </template>
            <el-menu-item-group>
              <el-menu-item index="MainFragment">&nbsp;&nbsp;&nbsp;首页</el-menu-item>
              <el-menu-item index="deal">
                &nbsp;&nbsp;&nbsp;待处理行程
                <el-badge
                  :value="mTotalDealOrder"
                  style="margin-left:10px;padding-bottom:8px"
                  v-if="mTotalDealOrder>0"
                ></el-badge>
              </el-menu-item>
              <el-menu-item index="query">&nbsp;&nbsp;&nbsp;行程查询</el-menu-item>
		      	  <el-menu-item index="count">&nbsp;&nbsp;&nbsp;司机统计</el-menu-item>
              <el-menu-item index="message">&nbsp;&nbsp;&nbsp;信息补录</el-menu-item>
              <el-menu-item index="partment">&nbsp;&nbsp;&nbsp;部门统计</el-menu-item>
              <el-menu-item index="charge">&nbsp;&nbsp;&nbsp;里程明细</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <el-row class="item-title" style="color:#ffffff">
                <i class="el-icon-menu"></i>
                <span>基础信息</span>
              </el-row>
            </template>
            <el-menu-item-group>
              <!-- <el-menu-item index="driverManager">司机管理</el-menu-item> -->
              <el-menu-item index="carManager">&nbsp;&nbsp;&nbsp;车辆档案</el-menu-item>
              <el-menu-item index="UserManager">&nbsp;&nbsp;&nbsp;人员管理</el-menu-item>
              <el-menu-item index="partmentManager">&nbsp;&nbsp;&nbsp;部门管理</el-menu-item>
              <el-menu-item index="dispatch">&nbsp;&nbsp;&nbsp;三方调度</el-menu-item>

              <!-- <el-menu-item index="partmentManager">部门管理</el-menu-item>
              <el-menu-item index="carManager">车辆管理</el-menu-item>
              <el-menu-item index="carManager">行驶证管理</el-menu-item>-->
            </el-menu-item-group>
          </el-submenu>
          <!-- 
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>档案管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="driverManager">司机档案</el-menu-item>
              <el-menu-item index="carManager">车辆档案</el-menu-item>
              <el-menu-item index="carManager">证照档案</el-menu-item>
            </el-menu-item-group>
          </el-submenu>-->

          <el-submenu index="3">
            <template slot="title">
              <el-row class="item-title" style="color:#ffffff">
                <i class="el-icon-s-grid"></i>
                <span>更多</span>
              </el-row>
            </template>
            <el-menu-item-group>
              <el-menu-item index="LogPage" class="menu-itemx">&nbsp;&nbsp;&nbsp;日志管理</el-menu-item>
              <!-- <el-menu-item index="WeightPage" class="menu-itemx">&nbsp;&nbsp;&nbsp;权限管理</el-menu-item> -->
              <el-menu-item index="noticePage" class="menu-itemx">&nbsp;&nbsp;&nbsp;消息提醒</el-menu-item>
              <el-menu-item index="settingPage">&nbsp;&nbsp;&nbsp;系统设置</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main
        style="background:#e1e1e1;padding:0px;width:99%;margin-left:0.5%;margin-right:0.5%;margin-top:10px"
      >
       <v-MainFragment
          v-if="mCurrentIndex=='MainFragment'"
          @refreshOrderNumberEvent1="queryControllerOrders(arguments)"
        ></v-MainFragment>
        <v-orderdeal
          v-if="mCurrentIndex=='deal'"
          @refreshOrderNumberEvent1="queryControllerOrders(arguments)"
        ></v-orderdeal>
        <v-orderquery v-if="mCurrentIndex=='query'"></v-orderquery>
	     	<v-ordercount v-if="mCurrentIndex=='count'"></v-ordercount>
        <v-message v-if="mCurrentIndex=='message'"></v-message>
        <v-drivermanager v-if="mCurrentIndex=='driverManager'"></v-drivermanager>
        <v-carmanager v-if="mCurrentIndex=='carManager'"></v-carmanager>
        <v-partmentmanager v-if="mCurrentIndex=='partmentManager'"></v-partmentmanager>
        <v-UserManager v-if="mCurrentIndex=='UserManager'"></v-UserManager>
        <v-SettingPage v-if="mCurrentIndex=='settingPage'"></v-SettingPage>
        <v-NoticePage v-if="mCurrentIndex=='noticePage'"></v-NoticePage>
        <v-LogPage v-if="mCurrentIndex=='LogPage'"></v-LogPage>
        <v-dispatch v-if="mCurrentIndex=='dispatch'"></v-dispatch>
        <v-partment v-if="mCurrentIndex=='partment'"></v-partment>
        <v-charge v-if="mCurrentIndex=='charge'"></v-charge>
        <!-- 一些对话框 -->
        <v-PersonInfoDialog ref="refPersonInfoDialog"></v-PersonInfoDialog>
      </el-main>
    </el-container>
  </el-container>
</template>


<style scoped>
@import "../assets/css/main.css";
@import "../assets/css/base.css";

.menu-itemx {
  color: #909399;
}
.el-submenu__title {
  background-color: red;
  padding: 0px;
}
.item-title {
  color: #ffffff;
  font-weight: bold;
  font-size: 15px;
}
</style>



<script>
import { getRequestHeader, loginApi } from "../api/user.js";
import { getNowFormatDate, getWeekToday } from "../api/util.js";
import { queryControllerOrdersApi } from "../api/order.js";
import { Loading } from "element-ui";
import OrderDeal from "./OrderDeal.vue";
import OrderQuery from "./OrderQuery.vue";
import MainFragment from "./MainFragment.vue";
import DriverManager from "./DriverManager.vue";
import CarManager from "./CarManager.vue";
import PartmentManager from "./PartmentManager.vue";
import UserManager from "./UserManager.vue";
import SettingPage from "./SettingPage.vue";
import NoticePage from "./NoticePage.vue";
import LogPage from "./LogPage.vue";
import Message from "./message.vue";
import Ordercount from "./ordercount.vue"; 
import PersonInfoDialog from "./main/PersonInfoDialog.vue";
import Dispatch from "./dispatch.vue"
import Partment from "./partment.vue"
import Charge from "./charge.vue"
export default {
  data() {
    return {
      mNoticeCount: 0,
      mTotalDealOrder: 0,
      mDefaultOpenMenu: ["1"],
      mCurrentIndex: "MainFragment",
      mLogoPic: require("../assets/logo.png")
    };
  },
  components: {
    /* 前面的组件名称不能和HTML标签一样*/
    "v-orderdeal": OrderDeal,
    "v-orderquery": OrderQuery,
    "v-drivermanager": DriverManager,
    "v-carmanager": CarManager,
    "v-partmentmanager": PartmentManager,
    "v-PersonInfoDialog": PersonInfoDialog,
    "v-MainFragment": MainFragment,
    "v-SettingPage": SettingPage,
    "v-NoticePage": NoticePage,
    "v-LogPage": LogPage,
    "v-UserManager": UserManager,
  "v-ordercount": Ordercount,
  "v-message": Message,
  "v-dispatch": Dispatch,
  "v-partment":Partment,
  "v-charge":Charge
  },
  mounted() {
    // 获取待处理订单
    this.queryControllerOrders();
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    menuSelect(v) {
      console.log(v);
      this.mCurrentIndex = v;
    },
    handleOpen() {},
    handleClose() {},
    login() {
      var that = this;
      this.showFullLoading();
      loginApi(
        this.ruleForm.username,
        this.ruleForm.pass,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.clsoeFullLoading();
            that.$message.success("登录成功");
            that.$parent.showMainPage();
          };
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
        })()
      );
    },
    queryControllerOrders() {
      var that = this;
      // that.mTableLoading = true;
      // that.showFullLoading();
      var filter = {};
      queryControllerOrdersApi(
        1,
        1,
        ["allowed"],
        "2020-01-01 00:00:00",
        getNowFormatDate() + " 23:59:59",
        filter,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            // that.clsoeFullLoading();
            that.mTotalDealOrder = data.totalCount;
          };
          this.fail = function(msg) {
            // that.clsoeFullLoading();
          };
        })()
      );
    }
  }
};
</script>